<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文章列表--layui后台管理模板 2.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../../../public/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../../public/plugin/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<link rel="stylesheet" href="../../../public/css/public.css" media="all" />
	
</head>

<body class="childrenBody" style="background: #f5f5f5;">

	<div class="btn">
		<form class="layui-form">
			<div class="layui-inline">
				<input type="checkbox" name="selectAll" id="selectAll" lay-filter="selectAll" lay-skin="primary" title="全选">
			</div>
			<a class="layui-btn uploadNewImg">新增</a>
			<a class="layui-btn layui-btn-warm batchDel">批量删除</a>
			<a class="layui-btn layui-btn-normal">导入</a>
			<a class="layui-btn layui-btn-normal">导出</a>
			<div class="layui-inline flsearch">
				<input type="text"  placeholder="请输入人名进行搜索" class="layui-input">
				<a class="layui-icon layui-icon-search"></a>
			</div>
			<hr>
		</form>
		
	</div>	

	<div class="layui-row layui-col-space15 card" id="card">

	</div>

	<script type="text/javascript" src="../../../public/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../../public/layui/layui.js"></script>
	<script type="text/javascript" src="../../../public/plugin/zTree/js/jquery.ztree.core.js"></script>
	<script>

		layui.config({
			base : "/js/"
		}).use(['flow','form','layer','upload'],function(){
			var flow = layui.flow,
				form = layui.form,
				layer = parent.layer === undefined ? layui.layer : top.layer,
				upload = layui.upload,
				$ = layui.jquery;

			//流加载
			var imgNums = 12;  //单页显示图片数量
			flow.load({
				elem: '#card', //流加载容器
				done: function(page, next){ //加载下一页
					$.get("/json/card.json",function(res){
						//模拟插入
						var cardList = [],data = res.data;
						var maxPage = imgNums*page < data.length ? imgNums*page : data.length;
						setTimeout(function(){
							for(var i=imgNums*(page-1); i<maxPage; i++){
								cardList.push(
									`
									<div class="layui-col-lg3 layui-col-md4 layui-col-sm6">
										<div class="layui-card">
											<div class="layui-card-body">
												<a href="#">
													<h3>${data[i].name}<span>(${data[i].duty})</span></h3>
													<p class="iconfont icon-phone">手机： ${data[i].phone}</p>
													<p class="iconfont icon-qq">QQ： ${data[i].qq}</p>
													<p class="iconfont icon-email">邮箱： ${data[i].email}</p>
													<img src="../../../public/images/logo-notxt.png">
												</a>
											</div>
										</div>
									</div>
									`
									
								);
							}
							next(cardList.join(''), page < (data.length/imgNums));
							form.render();
						}, 500);
					});
				}
			});
		});

	</script>
</body>
</html>